<template>
  <div class="card-deail" @click="gogogo">
    <div class="movie-filter"></div>
    <div class="poster-bg">
      <img :src="movieData.albumImg" />
    </div>
    <van-card class="van-card" v-if="movieData.nm">
      <div slot="tags" class="van-tags">
        <img :src="movieData.albumImg" />
      </div>
      <div slot="footer" class="van-footer">
        <div class="title">{{movieData.nm}}</div>
        <div class="title-en-name">{{movieData.enm}}</div>
        <div class="score">
          {{movieData.sc}}
          <span class="snum">({{movieData.snum}}万人评)</span>
        </div>
        <div class="type">{{movieData.cat}}</div>
        <div class="src">{{movieData.src}}/{{movieData.dur}}分钟</div>
        <div class="pubDesc">{{movieData.pubDesc}}</div>
      </div>
    </van-card>

    <div class="arrow-g">
      <img src="../../../public/images/right.png" />
    </div>
  </div>
</template>
<script>
export default {
  data: () => ({}),
  created () {},
  mounted () {},
  methods: {
    gogogo () {
      this.$router.push(`/preview/${this.$route.params.id}`)
    }
  },
  // 接收数据
  props: ['movieData'],
  filters: {},
  computed: {
    // changeWH () {
    //   return this.movieData.img.replace('w.h', '1000.1000')
    // }
  }
}
</script>
<style lang="less" scoped>
.card-deail {
  position: relative;
  cursor: pointer;
  height: 188px;
  overflow: hidden;
  margin-top: 7px;
  .movie-filter {
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-color: #333;
  }
  .poster-bg {
    img {
      width: 100%;
      height: 100%;
      z-index: -1;
      overflow: hidden;
      position: absolute;
      -webkit-filter: blur(1.2rem);
      filter: blur(1.2rem);
      background-size: cover;
      background-repeat: no-repeat;
      opacity: 0.55;
    }
  }
  .van-card {
    background: none;
    display: flex;
    .van-tags {
      width: 100%;
      height: 100%;
    }
    .van-card__header {
      height: 156px;
      width: 110px;
    }
    .van-card__header img {
      width: 100%;
      height: 100%;
    }
    .van-card__footer {
      width: 207px;
      margin-left: 10px;
      text-align: left;
    }
    .van-footer {
      float: left;
      .title {
        font-size: 20px;
        margin-top: 2px;
        font-weight: 700;
        overflow: hidden;
        color: #fff;
      }
      .title-en-name,
      .type,
      .src,
      .pubDesc {
        margin-top: 8px;
        font-size: 12px;
        color: #fff;
        opacity: 0.8;
      }
      .score {
        font-size: 18px;
        font-weight: 700;
        color: #fc0;
        margin-top: 7px;
        .snum {
          margin-top: 10px;
          font-size: 12px;
          color: #fff;
          opacity: 0.8;
        }
      }
    }
  }
  .arrow-g {
    position: absolute;
    width: 10px;
    right: 15px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }
}
</style>
